/**
 * 仪表盘
 * PanelEchartsDemo (reactCharts)
 * @author hly
 * @date  2021-11-25
 */
import React from 'react';
import { FirstHeaderC, SecondHeaderC, PanelEcahrtsC } from '../../components';
import { Row, Col } from 'antd';

class PanelEchartsDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{ name: '债券', value: 20, date: '近一年' }],
      data1: undefined,
      dataA: [{ name: '四分之零', value: 0.6, date: '近一年' }],
      dataB: [{ name: '四分之一', value: 0.25, date: '近一年' }],
      dataC: [{ name: '四分之二', value: 0.5, date: '近一年' }],
      dataD: [{ name: '四分之三', value: 0.75, date: '近一年' }],
      dataE: [{ name: '四分之四', value: 1, date: '近一年' }],
      datas: [
        { name: '四分之零', value: 0, date: '近一年' },
        { name: '四分之一', value: 0.25, date: '近一年' },
        { name: '四分之二', value: 0.5, date: '近一年' },
        { name: '四分之三', value: 0.75, date: '近一年' },
        { name: '四分之四', value: 1, date: '近一年' },
      ],
    };

    setTimeout(() => {
      this.setState({
        data1: [{ value: 20, name: '语文', date: '近一年' }],
      });
    }, 5000);
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='仪表盘' />
        <Row gutter={16}>
          <Col span={8}>
            <SecondHeaderC title='同步加载数据' />
            <PanelEcahrtsC data={this.state.data} maxValue={100} panelHeight={130} height={210} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='无数据' />
            <PanelEcahrtsC data={[]} maxValue={100} height={310} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='异步加载数据' />
            <PanelEcahrtsC data={this.state.data1} maxValue={100} height={300} width={180} panelHeight={180} />
          </Col>
        </Row>
        <Row gutter={16}>
          <FirstHeaderC title='各阶段数据展示' />
          <Col span={4}>
            <SecondHeaderC title='0/4' />
            <PanelEcahrtsC data={this.state.dataA} maxValue={1} height={210} />
          </Col>
          <Col span={4}>
            <SecondHeaderC title='1/4' />
            <PanelEcahrtsC data={this.state.dataB} maxValue={1} height={210} />
          </Col>
          <Col span={4}>
            <SecondHeaderC title='2/4' />
            <PanelEcahrtsC data={this.state.dataC} maxValue={1} height={210} />
          </Col>
          <Col span={4}>
            <SecondHeaderC title='3/4' />
            <PanelEcahrtsC data={this.state.dataD} maxValue={1} height={210} />
          </Col>
          <Col span={4}>
            <SecondHeaderC title='4/4' />
            <PanelEcahrtsC data={this.state.dataE} maxValue={1} height={210} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <FirstHeaderC title='多个数据' />
            <PanelEcahrtsC
              data={this.state.datas}
              maxValue={1}
              // height={130}
            />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='生成的canvas高度310，背景元素默认210， 高超出' />
            <PanelEcahrtsC data={this.state.data} maxValue={100} panelHeight={310} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='生成的canvas宽度00' />
            <PanelEcahrtsC width={'300px'} data={this.state.data} maxValue={100} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='图形坐标x,y: ["60%", "60%"], canvans宽高默认200超出' />
            <PanelEcahrtsC center={['60%', '60%']} data={this.state.data} maxValue={100} width={'200px'} panelHeight={'200px'} />
          </Col>
        </Row>
      </div>
    );
  }
}

export default PanelEchartsDemo;
